<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>函数防抖测试</title>
  </head>
  <body>
    <input type="text" id="user_input" />&nbsp;
    <button id="btn">搜索</button>
    <script type="text/javascript">
      /*
       * 函数防抖：
       *   概念： 延迟要执行的动作，若在延时的这段时间内，再次触发了，则取消之前开启的动作，重新计时。
       *   举例： 电脑无操作1分钟后会进入休眠，当第40秒时鼠标被移动一下，重新计时1分钟。
       *   实现： 定时器。
       *   应用：搜索时等用户完整输入内容后再发送查询请求。
       * */

      let input = document.getElementById("user_input");
      let id;
      input.addEventListener("keyup", () => {
        let data = input.value;
        clearTimeout(id);
        id = setTimeout(() => {
          mockAjax(data);
        }, 500);
      });

      function mockAjax(data) {
        console.log(`sendAjax---------${data}`);
      }
    </script>
  </body>
</html>
